<template>
    <el-drawer v-model="$store.state.userCenter.setPermissions" :title="titleName.name + '权限设置'" size="55%">
        
        <template #footer>
            <el-button>取消</el-button>
            <el-button type="primary">确定</el-button>
        </template>
        <el-transfer class="list" :data="PermissionsName" v-model="getPermissionsName" :titles="['权限列表', '选中的权限']"
            :render-content="renderFunction" @left-check-change="handleLeftCheckChange">
            <template #left-footer>
                <el-popover placement="top-start" title="添加权限" :width="200" trigger="click" :visible="visible">
                    <template #reference>
                        <el-button @click="visible = !visible">添加权限</el-button>
                    </template>
                    <el-form size="small">
                        <el-form-item label="权限名称">
                            <el-input v-model="rolesList.name"></el-input>
                        </el-form-item>
                        <el-form-item label="权限路径">
                            <el-input v-model="rolesList.path"></el-input>
                        </el-form-item>
                        <el-form-item label="按钮名称">
                            <el-input v-model="rolesList.action"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button size="small" @click="gainPermissions">确定</el-button>
                    <el-button size="small" @click="visible = false">取消</el-button>
                </el-popover>
            </template>
            <template #right-footer>
                <el-button @click="handleRoles">确定修改</el-button>
            </template>
        </el-transfer>
    </el-drawer>
</template>
<script setup>
import { ref, defineProps, onMounted, watch } from 'vue'
import { getAllRoles, addRoles, delRoles } from '@/api/roles.js'
import { getRoles } from '@/api/group.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useStore } from 'vuex'
const store = useStore()
//父组件传递过来的用户组的数据
const props = defineProps({
    row: Object,
    rightPermissions: Array
})
//获取用户组名称
const titleName = ref({})
watch(()=>props.row,()=>{
    titleName.value =props.row
},{deep:true})



//获取角色权限列表
let PermissionsName = ref({})
const addRolesPermissions = () => {
    getAllRoles().then(res => {
        PermissionsName.value = res.data.data.map(item=>({
            key: item.id,
            label: item.name,
            disabled: false
        }))
    })
}
onMounted(()=>{
    addRolesPermissions()
    
})

//选中左边的权限到右边
watch(()=>props.rightPermissions,(nav)=>{
    getPermissionsName.value = props.rightPermissions
    console.log(props.rightPermissions)
},{deep:true})
let getPermissionsName = ref([])
getPermissionsName.value = props.rightPermissions

//把选中权限列表移动到右边,删除按钮就会消失
watch(getPermissionsName,(val)=>{
    if(getPermissionsName){
        isShowDelete.value = []
    }
    
},{deep:true})
//添加角色权限
const rolesList = ref({
    name: '',
    path: '',
    action: ''
})
const gainPermissions = async () => {
    if (!rolesList.value.name || !rolesList.value.path) return ElMessage.warning('权限框不能为空')
    const res = await addRoles(rolesList.value)
    if (res.data.success) {
        ElMessage.success('添加成功')
        visible.value = false
        addRolesPermissions()
        rolesList.value = {}
    }
}
//添加权限弹出框显隐
const visible = ref(false)
//穿梭框 自定义数据项渲染函数
const renderFunction = (h, option) => { 
    return ('div', { style: { display: 'flex', justifyContent: 'space-between', width: '213px' } }, [
        h('span', option.label),
        isShowDelete.value.includes(option.key) ?           //这里是isShowDelete.value包含了option.key就显示按钮,否则不显示按钮
        h('el-button', {
            async onclick() {
                ElMessageBox.confirm(
                    '请确认是否删除',
                    'warning',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                ).then(async () => {
                    const res = await delRoles({ id: option.key })
                    addRolesPermissions()
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                })
            }
        }, '删除') : h('span','')
    ]) 
}

//是否显示删除按钮
const isShowDelete = ref([])
const handleLeftCheckChange = (value, movedKeys)=>{
    isShowDelete.value = value
}

//把左边权限移动到右边

const handleRoles = async()=>{
    const res = await getRoles({
        groupid: titleName.value.id,
        ids: getPermissionsName.value.join()
    })
    if(res.data.success){
        
        ElMessage.success('修改成功')
    }else{
        ElMessage.warning('修改失败')
    }
}
</script>

<style scoped>
:deep(.el-transfer-panel) {
    width: 260px;
}

:deep(.el-transfer-panel__item.el-checkbox .el-checkbox__label) {
    display: flex;
    justify-content: space-between;
    width: 213px;
}
</style>